<template>
    <div>
        <a-row style="margin: 0px 0 10px">
            <a-col span="8">
                <a-button
                        type="primary"
                        @click="handleModel('添加')"
                >
                    添加
                </a-button>
            </a-col>
            <a-col span="8">
                <a-button
                        v-show="this.showButton"
                        :disabled="disabled"
                        type="danger"
                        style="position: absolute;left: 50%;transform: translateX(-50%)"
                        @click="deleteTree"
                >
                    删除
                </a-button>
            </a-col>
            <a-col span="8">
                <a-button
                        v-show="this.showButton"
                        :disabled="disabled"
                        type="primary"
                        style="float: right"
                        @click="handleModel('编辑',selectKey)"
                >
                    编辑
                </a-button>
            </a-col>
        </a-row>

        <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect"></contextmenu>

        <a-input-search allowClear style="margin-bottom: 8px" placeholder="Search" @change="onChange"/>
        <a-card style="height: 53vh;overflow-y:auto;">
            <a-tree
                    :expanded-keys="expandedKeys"
                    :auto-expand-parent="autoExpandParent"
                    :tree-data="this.dataInfo"
                    @expand="onExpand"
                    @select="handleSelect"
                    @rightClick="handleRight"
            >
                <template slot="title" slot-scope="{ title }">
        <span v-if="title.indexOf(searchValue) > -1">
          {{ title.substr(0, title.indexOf(searchValue)) }}
          <span style="color: #f50">{{ searchValue }}</span>
          {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
        </span>
                    <span v-else>{{ title }}</span>
                </template>
            </a-tree>
        </a-card>

    </div>
</template>

<script>
  import Contextmenu from "@/components/menu/Contextmenu";

  export default {
    name: "QueryTree",
    components: {Contextmenu},
    props: {
      handleModel: Function,
      handleDelete: Function,
      treeSelectChange: Function,
      showButton: {type: Boolean, default: true},
      dataInfo: {
        type: Array,
        default: function () {
          return [];
        }
      }
    },
    created() {
      this.generateList(this.dataInfo);
    },
    data() {
      return {
        expandedKeys: ['菜单'],
        searchValue: '',
        autoExpandParent: true,
        dataList: [],
        selectKey: '',
        disabled: true,
        menuVisible: false,
      };
    },
    watch: {
      selectKey(key) {
        if (!key) {
          this.disabled = true
        }
      }
    },
    computed: {
      menuItemList() {
        return [
          {key: '1', icon: 'close-circle', text: '删除'}
        ]
      },
    },
    methods: {
      handleRight({node}) {
        if (this.selectKey && node.eventKey == this.selectKey) {
          this.menuVisible = true
        }
      },
      onMenuSelect() {
        this.deleteTree()
      },
      deleteTree() {
        this.$confirm({
          content: '确定删除吗?',
          onOk: () => {
            this.handleDelete(this.selectKey)
            this.disabled = true
            this.selectKey = undefined
          }
        })
      },
      handleSelect(key) {
        this.selectKey = key[0]
        this.disabled = false
        this.treeSelectChange(key)
      },
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onChange(e) {
        const value = e.target.value;
        const expandedKeys = this.dataList
          .map(item => {
            if (item.title.indexOf(value) > -1) {
              return this.getParentKey(item.key, this.dataInfo);
            }
            return null;
          })
          .filter((item, i, self) => item && self.indexOf(item) === i);
        Object.assign(this, {
          expandedKeys,
          searchValue: value,
          autoExpandParent: true,
        });
      },
      generateList(data) {
        for (let i = 0; i < data.length; i++) {
          const node = data[i];
          const key = node.key;
          this.dataList.push({key, title: node.title});
          if (node.children) {
            this.generateList(node.children);
          }
        }
      },
      getParentKey(key, tree) {
        let parentKey;
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i];
          if (node.children) {
            if (node.children.some(item => item.key === key)) {
              parentKey = node.key;
            } else if (this.getParentKey(key, node.children)) {
              parentKey = this.getParentKey(key, node.children);
            }
          }
        }
        return parentKey;
      }
    },

  };
</script>

<style scoped>

</style>